<template>
  <div class="strut-div">
    <div :style="{width:'105%',height: '105%',marginBottom:'60px'}" ref="myEchart" id="gov-map" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
	import autoHover from '../../util/autoHover.js';

  export default {
    props: {
      areaCode: {
        type: String,
        default: "22"
      },
      max: {
        type: String,
        default: '2000'
      },
      list: {
        type: Array,
        default: []
      },
      height: {
        type: String,
        default: document.documentElement.clientHeight - 280 + 'px'
      }
    },
    data() {
      return {
        chart: null,
        mapData: {// geo.json数据
          type: Object,
          default: []
        },
        chartData: [],
        option: {
          title: {
            left: 'center',
            textStyle: {
              fontSize: 16,
            }
          }
        },

      }
    },
    methods: {
      initChart() {// 初始化
        console.log('initMapChart');
        this.$axios.get('../static/taiyuan.json').then((res) => {
          // for (let i = 0; i < res.data.features.length; i++) {
          //   if (res.data.features[i].geometry.coordinates != "") {
          //     res.data.features[i].geometry.coordinates = JSON.parse(res.data.features[i].geometry.coordinates)
          //   }
          //   if (res.data.features[i].properties.cp != "") {
          //     res.data.features[i].properties.cp = JSON.parse(res.data.features[i].properties.cp)
          //   }
          // }
          this.mapData = res.data;
          console.log(this.mapData.features.length)
          this.chart = echarts.init(this.$refs.myEchart);
          this.getAreaMapInfoList();
        })
      },
      getAreaMapInfoList() {// 获取地图数据
        for (let i = 0; i < this.mapData.features.length; i++) {
          let name = this.mapData.features[i].properties.name;
          let code = this.mapData.features[i].properties.code;
          let cp = this.mapData.features[i].properties.cp;
          let totalCount = 0;
          // for (let j = 0; j < this.list.length; j++) {
          //   if (this.list[j].code == code) {
          //     console.log(list[j])
          //     totalCount = this.list[j].entNum;
          //     console.log(totalCount)
          //     break;
          //   }
          // }
          console.log(name)
          this.chartData.push({
            name: name,
            // value: cp.concat(totalCount),
            value: cp,
            code: code
          });
        }
        console.log(this.mapData.length)
        //注册地图
        echarts.registerMap('hongtong', this.mapData);
        this.renderMap('hongtong', this.chartData);

      },
      renderMap(map, data) { //绘制地图
        console.log(data)
        this.option.title.subtext = ""
        //地理坐标系组件
        this.option.geo = {//引入地图 ，渲染地图凹凸显示
          type: 'map',
          map: map,
          label: {
            normal: {
              show: true,
              color: '#fff', // 标注边线线宽，单位px，默认为1
              label: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: false
              }
            }
          },
          roam: false,//禁止缩放
          zoom: 1,
          itemStyle: {
            normal: {
              borderColor: '#1BB5D5',//地图边界线的颜色
              // areaColor: '#184A6E',//地图整体区域的颜色
              areaColor: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {offset: 0, color: '#137F90'},
                  {offset: 0.3, color: '#137B8E'},
                  {offset: 0.5, color: '#156C84'},
                  {offset: 0.8, color: '#175273'},
                  {offset: 1.0, color: '#184A6E'}
                ]
              ),
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 5,
              shadowOffsetX: 5
            },
            emphasis: {
              // areaColor: '#132845'//鼠标滑过的颜色
              areaColor: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {offset: 0, color: '#FDBB39'},
                  {offset: 0.3, color: '#F7972F'},
                  {offset: 0.5, color: '#F5872B'},
                  {offset: 0.8, color: '#F06822'},
                  {offset: 1.0, color: '#F06922'}
                ]
              ),
            }
          },
        }
        // 地图标点
        this.option.series = [
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //关系图节点标记的图形
            symbolSize: [20, 20],
            symbolOffset: [0, '-40%'],//关系图节点标记相对于原本位置的偏移。[0, '50%']
            large: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 9,
                }
              }
            },
            itemStyle: {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              normal: { //默认样式
                label: {
                  show: true
                },
                borderType: 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                borderColor: 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
                borderWidth: 1, //图形的描边线宽。为 0 时无描边。
                opacity: 0.9
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5

              },
              emphasis: {//高亮状态

              }
            },
            lineStyle: { //==========关系边的公用线条样式。
              normal: {
                color: 'rgba(255,0,255,0.4)',
                width: '100',
                type: 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                curveness: 0.3, //线条的曲线程度，从0到1
                opacity: 1
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {//高亮状态

              }
            },
            label: { //=============图形上的文本标签
              normal: {
                show: false,//是否显示标签。
                position: 'inside',//标签的位置。['50%', '50%'] [x,y]
                textStyle: { //标签的字体样式
                  color: '#cde6c7', //字体颜色
                  fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                  fontWeight: 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                  fontFamily: 'sans-serif', //文字的字体系列
                  fontSize: 8, //字体大小
                }
              },
              emphasis: {//高亮状态

              }
            },
            edgeLabel: {//==============线条的边缘标签
              normal: {
                show: false
              },
              emphasis: {//高亮状态

              }
            },

            zlevel: 6,
            data: data,
          }]
        //渲染地图
        setTimeout(() => {
          // option.xAxis.data = ['行政处罚', '周二', '周三', '周四', '周五', '周六', '周日'];
          // option.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320];

          this.chart.setOption(this.option);
					console.log(this.mapData);
					autoHover.autoHover(this.chart,this.option,this.mapData.features.length);
        }, 300);

      }
    },
    mounted() {
      console.log("mounted");
      this.initChart();
      // this.chart = echarts.init(document.getElementById('gov-category'));
    },
  }
</script>

<style>

</style>
